<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>小K服务后台管理系统--管理员管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="../../../../static/favicon.ico" th:href="@{/favicon.ico}">

    <link rel="stylesheet" type="text/css" href="../../../../static/bootstrap/css/bootstrap.min.css"
          th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/plugins/layui/css/layui.css"
          th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/font-awesome.css"
          th:href="@{/web/admin/css/font-awesome.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/style.css"
          th:href="@{/web/admin/css/style.css}"/>

    <style type="text/css">
        table td,
        table th {
            text-align: center;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content" id="body">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>系统用户详细信息
                        <small>编辑系统用户信息</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <form method="get" class="form-horizontal">
                        <input v-model="info.id" type="hidden" class="form-control" aria-required="true" placeholder=""
                               value="0">
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">用户名</label>
                                <div class="col-sm-9">
                                    <input v-model="info.username" type="text" class="form-control" aria-required="true"
                                           placeholder="用户名、登录名" th:disabled="${isUpdate}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">姓名</label>
                                <div class="col-sm-9">
                                    <input v-model="info.name" type="text" class="form-control" aria-required="true"
                                           placeholder="姓名、昵称">
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">电子邮件</label>
                                <div class="col-sm-9">
                                    <input v-model="info.email" type="email" class="form-control" aria-required="true"
                                           placeholder="电子邮件">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">联系方式</label>
                                <div class="col-sm-9">
                                    <input v-model="info.phone" type="text" class="form-control" aria-required="true"
                                           placeholder="联系方式">
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">设置密码</label>
                                <div class="col-sm-9">
                                    <input v-model="info.password1" type="password" class="form-control"
                                           aria-required="true" placeholder="设置用户密码">
                                    <span class="help-block m-b-none">留空则不设置密码或修改密码</span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">确认密码</label>
                                <div class="col-sm-9">
                                    <input v-model="info.password2" type="password" class="form-control"
                                           aria-required="true" placeholder="确认用户密码">
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">用户角色</label>
                                <div class="col-sm-9">
                                    <select v-model="info.roleGroup" class="form-control m-b" name="account"
                                            title="管理员用户角色">
                                        <option value="0" disabled>选择权限</option>
                                        <option th:each="item,status : ${groups}" th:value="${item.id}"
                                                th:text="${item.name}">选项 1
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label">校验密码</label>
                                <div class="col-sm-9">
                                    <input v-model="info.myPassword" type="password" class="form-control"
                                           aria-required="true" placeholder="校验当前用户密码">
                                    <span class="help-block m-b-none">验证当前用户的密码权限</span>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-12 text-center">
                                <button type="button" class="btn btn-w-m btn-success" v-on:click="save">保存管理员用户信息
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

</div>

<script src="../../../../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}" type="text/javascript"
        charset="utf-8"></script>
<script src="../../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"
        type="text/javascript" charset="utf-8"></script>
<script src="../../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript"
        charset="utf-8"></script>
<script src="../../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript"
        charset="utf-8"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['layer'], function () {
        function getMsgForBean(data, br) {
            var msg = [data.msg];
            if (typeof br !== "string") {
                br = "<br>";
            }
            if (data.msgs !== undefined && data.msgs.length > 0) {
                for (var i = 0; i < data.msgs.length; i++) {
                    msg.push(data.msgs[i]);
                }
            }
            return msg.join(br);
        }

        var app = new Vue({
            el: '#body',
            data: {
                info: {
                    id: /*[[${info.id}]]*/0,
                    username: /*[[${info.username}]]*/"",
                    name: /*[[${info.name}]]*/"",
                    email: /*[[${info.email}]]*/"",
                    phone: /*[[${info.phone}]]*/"",
                    roleGroup: /*[[${info.roleGroup.id}]]*/0,
                    password1: "",
                    password2: "",
                    myPassword: ""
                },
                method: /*[[${isUpdate?'PUT':''}]]*/"POST"
            },
            methods: {
                save: function () {
                    var vue = this;
                    if (vue.info.username.trim() === "") {
                        layui.layer.msg("登录名不能为空");
                        return false;
                    }
                    if (vue.info.password1.trim() !== vue.info.password2) {
                        layui.layer.msg("两次密码不一致");
                        return false;
                    }
                    if (vue.info.myPassword.trim() === "") {
                        layui.layer.msg("请输入当前登录用户密码");
                        return false;
                    }
                    if (vue.info.method === "POST" && vue.info.password1.trim() === "") {
                        layui.layer.msg("新增用户密码不能为空");
                        return false;
                    }
                    if (vue.method !== "POST") {
                        vue.info._method = vue.method;
                    }

                    $.ajax({
                        type: "POST",
                        data: vue.info,
                        url: "",
                        async: true,
                        dataType: "json",
                        success: function (data) {
                            if (data.code === 0) {
                                layui.layer.msg(getMsgForBean(data));
                                var index = parent.layui.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layui.layer.close(index);
                                parent.app.loadPage();
                            } else {
                                layui.layer.msg(getMsgForBean(data), {time: 20000, btn: ['明白了']});
                            }
                        },
                        error: function () {
                            layui.layer.msg("加载错误", {time: 5000, btn: ['明白了']});
                        }
                    });
                }
            },
            mounted: function () {

            }
        });
    });
    /*]]>*/
</script>
</body>

</html>